<template>
	<view class="apps">
		<uv-navbar title="" titleStyle="font-weight:400;" bg-color="rgba(255,255,255,.01)" placeholder autoBack="true">
			<template v-slot:left>
				<view class="flex aic">
					<uv-icon name="https://lifeanclor.byyds.cn/static/images/backlogo.png" size="30"></uv-icon>
					<view class="f16 ml20 fw4 c333">莱安AI家居</view>
				</view>
			</template>
		</uv-navbar>
		<image class="bg" src="https://lifeanclor.byyds.cn/static/images/lan.jpg" mode="widthFix"></image>
		<view class="pr zidx5 flex aic plr20 mt20">
			<view class="f1" @click="showUsers">
				<uv-cell-group :border="false">
						<uv-cell>
							<!-- 自定义左侧标题 -->
							<template v-slot:title>
								<view class="flex aic">
								<text class="c333 f15 mr10">请您登录</text><uv-icon size="14px" name="arrow-down-fill" color="#333"></uv-icon>
								</view>
							</template>
						</uv-cell>
					</uv-cell-group>
			</view>
			<view class="f1 flex aic jcsa">
				<view class="bgwhite wh40 mr20 flex aic jcc bdr15 boxsd pr">
					<uv-icon name="bell" size="30"></uv-icon>
					<view class="pa" style="right:5rpx;top:5rpx;">
						<uv-badge max="99" bgColor="#ff4d88" color="#fff" value="9"></uv-badge>
					</view>
				</view>
				<view class="bgwhite wh40  flex aic jcc bdr15 boxsd">
					<uv-icon name="plus" size="30"></uv-icon>
				</view>
			</view>
		</view>
		<uv-gap height="30"></uv-gap>
		<view class="flex fdc mlr20 zidx5">
			<view class="flex fdc bgf5 bdr15 boxsd ptb20 plr20 mb30">
				<view class="flex aic mr20">
					<view class="f1 flex" @click="showMachine">
						<uv-avatar src="https://lifeanclor.byyds.cn/static/images/machine_true.png" shape="circle" size="30"></uv-avatar>
						<view class="c333 f14 ">名称成成阿凡达撒旦法</view>
					</view>
					<view class="flex ">
						<view class="f12 cred mr20">水质优</view>
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/MdiWifi.png" size="16"></uv-icon>
					</view>
				</view>
				<view class="f1">
					<uv-grid :border="false" col="4">
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd mtb20 ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon1.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon2.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon3.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon4.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			<view class="flex fdc bgf5 bdr15 boxsd ptb20 plr20 mb30">
				<view class="flex aic mr20">
					<view class="f1 flex aic" @click="showMachine">
						<uv-avatar src="https://lifeanclor.byyds.cn/static/images/machine_true.png" shape="circle" size="30"></uv-avatar>
						<view class="c333 f14 ">名称成成阿凡达撒旦法</view>
					</view>
					<view class="flex aic">
						<view class="f12 cred mr20">水质优</view>
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/MdiWifi.png" size="16"></uv-icon>
					</view>
				</view>
				<view class="f1">
					<uv-grid :border="false" col="4">
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsds mtb20 ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon1.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon2.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon3.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
						<uv-grid-item>
							<view class="flex fdc aic jcc bdr50p boxsd  mtb20  ptb20 plr20">
								<uv-icon name="https://lifeanclor.byyds.cn/static/images/icon4.png"  size="40px"></uv-icon>
							</view>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			
		</view>
		<uv-tabbar :value="tabActive" inactiveColor="#555" activeColor="#02A33" customStyle="background-image:linear-gradient(to bottom, #EEF0F5 0%, #F8F9FB 100%);border-top-width: 1px !important;
			border-color: #fefefe !important;border-top-left-radius: 12px; border-top-right-radius:12px ; padding-top:5px;">
				<uv-tabbar-item text="首页">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar1a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar1.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="服务">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar2a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar2.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="我的">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar3a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar3.png"></image>
					</template>
				</uv-tabbar-item>
		</uv-tabbar>
		//用户弹出
		<uv-popup ref="usersPopup" bgColor="none">
			<view class="flex fdc w560 bdr20 boxsd bgf5 mh100 ptb20 plr20">
				<view class="flex aic ptb20 bdb1">
					<view class="f1 f14 c02A33">邂逅一只猫</view>
					<view class="f1 f12 c999">创建者</view>
					<view class="flex jcc" style="width:20px;">
						<uv-icon name="checkbox-mark" size="16" color="#02A33"></uv-icon>
					</view>
				</view>
				<view class="flex aic ptb20 bdb1">
					<view class="f1 f14 c333">小宝贝贝</view>
					<view class="f1 f12 c999"></view>
					<view class="flex jcc" style="width:20px;"></view>
				</view>
				<view class="flex aic jcc ptb20">
					<view class="mt30 bgwhite boxshadow3 bdr100 plr05 ptb05 boxsd">
						<uv-button shape="circle" color="linear-gradient(180deg, #D7E0E8 0%, #F4F4F4 100%)" @click="handle('/pages/mine/persons')">
							<view class="flex aic">
								<uv-icon name="setting-fill" color="#02A33"></uv-icon>
								<view class="f15 c02A33 ml10">家庭管理</view>
							</view>
						</uv-button>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="machinePopup" bgColor="none">
			<view class="flex fdc w560 bdr20 boxsd bgf5 mh100 ptb20 plr20">
				<view class="ptb20 bdb1 plr10">
					<view class="bgwhite ptb20 plr20 bd100s boxsds bgimge2e7 plr05 ptb05">
						<uv-input shape="circle"  customStyle="font-weight:400;" border="none"  placeholder="请输入修改名称" suffixIcon="edit-pen-fill" suffixIconStyle="color:#02A33;font-size:24px;margin-right:15rpx;">
							
						</uv-input>
					</view>
				</view>
				<!--view class="ptb20 bdb1 plr30">
					<view class="bgf1 boxsd bdr100 plr05 tb05">
						<uv-button shape="circle" text="确认修改" customStyle="height:44px;font-weight:400" customTextStyle="color:#fff;font-weight:400" color="linear-gradient(180deg, #2688df, #65b3f3)"></uv-button>
					</view>
				</view-->
				<view class="ptb20  plr30">
					<view class=" bgwhite bdr100 plr05 ptb05 boxsd" @click="handle('/pages/device/device?id=1')">
						<uv-button shape="circle" color="linear-gradient(180deg, #D7E0E8 0%, #F4F4F4 100%)">
							<view class="flex aic">
								<uv-icon name="setting-fill" color="#02A33"></uv-icon>
								<view class="f15 c02A33 ml10">设备详情</view>
							</view>
						</uv-button>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const tabActive=ref(0),
		  usersPopup = ref(null),
		  machinePopup=ref(null),
		  value=ref(""),
		  suffixIcon=ref("eye-off-outline"),
		  form=ref({name:"",password:""})
	
	const showUsers=()=>{
		//判断登录
		
		//展示列表
		usersPopup.value.open();
		
	},closeUsers = () =>{
		usersPopup.value.close();
	},showMachine = ()=>{
		machinePopup.value.open();
	},chooseMachine = ()=>{
		machinePopup.value.close();
	},tabIcon=()=>{
		if(suffixIcon.value =='eye'){
			suffixIcon.value='eye-off-outline'
			pwd.value = true
		}else{
			suffixIcon.value='eye'
			pwd.value=false
		}
	},handle=(e)=>{
		uni.navigateTo({
			url:e,
		})
	}
	
	onLoad(()=>{
		
	})
</script>